<template>
  <div class="login_container">
    <div class="login_box">
      <!-- logo区域 -->
      <div class="avatar_box">
        <img src="~assets/img/login/logo.png" alt="">
      </div>
      <!-- 登录表单 -->
      <el-form ref="loginForm" label-width="0px" :disabled="cBtn" :model="loginForm" :rules="loginRules" class="login_form">
        <!-- 用户名 -->
        <el-form-item prop='username'>
          <el-input placeholder="请输入用户名" :disabled="cBtn"  v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input :type="unpass" :disabled="cBtn"  placeholder="请输入用户密码" v-model="loginForm.password" :prefix-icon="lock">  <el-button slot="append" @click="pass=!pass" class="view" :icon="view"></el-button></el-input>
        </el-form-item>
        <!-- 提交 -->
        <el-form-item label="" class="btns">
           <el-button type="primary" @click="submit" :disabled="cBtn" >登录</el-button>
           <el-button type="info" @click="reset" :disabled="cBtn">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name:'login'
  ,data(){
    return {
      //可否点击
        cBtn:false
      //密码是否可见
        ,pass:false
        // 登录数据
        ,loginForm:{
          username:'admin'
         ,password:'123456'
        }
        //表单的规则验证
       ,loginRules:{
         username:[
          { required: true, message: '请输入用户名称!', trigger: 'blur' }
         ,{min:3, max:10, message:"长度在 3 到 10 个字符!", trigger:'blur'}
         ]
        ,password:[
          {required: true, message:'请输入用户密码!', trigger:'blur'}
         ,{min:6, max:15, message:"长度在 6 到 15 的字符!", trigger:"blur"}
        ]
       }      
    }
  }
  ,computed:{
    lock(s){   
      return s.pass?'el-icon-unlock':'el-icon-lock'
    }
    ,view(s){
      return s.pass?'iconfont icon-yanjing':'iconfont icon-yanjing1'
    }
    ,unpass(s){
      return s.pass?'text':'password'
    }
  }
 ,methods:{
   //重置表单数据
   reset(){
     this.pass=false
     this.$refs['loginForm'].resetFields()
   }
   //提交数据
  ,submit(){
    this.cBtn=true
    this.$refs['loginForm'].validate(async valid=>{
      if(!valid)return;
      const {data:result}= await this.$XHR.post('login',this.loginForm).catch(i=>{  
        this.cBtn=false
        this.$message({
          type:"error"
         ,message:"服务器错误"
         ,center:"center"
        })
      })

      if(result.meta.status!==200)    
        return setTimeout(()=>{
          this.cBtn=false
          this.$message({
            type:'error'
           ,message:'登录失败'
           ,center:'center'
          })
        },1000)
      

      //延迟时间
      let redir=2000

      this.$message({
        message:'登录成功,即将跳转'
       ,type:'success'
       ,duration:redir
       ,center:'center'
      })
      /*
        登录成功后返回的token保存在sessionstore里
      */
      window.sessionStorage.setItem('token',result.data.token)
      setTimeout(()=>{
        this.$router.push('/home') 
      },redir)   
    })
  }
 }
}
</script>

<style lang="less" scoped>
  .login_container{
    background-color: #2b4b6b;
    height: 100%;   

    .login_box{
      width: 450px;
      height: 300px;
      background-color: white;
      border-radius: 6px;
      transform: translate(-50%,-50%);
      position: absolute;
      left: 50%;
      top:50%;
      z-index: 5;
      .avatar_box{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position:  absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;

        img{
          border-radius: 50%;
          width: 100%;
          height: 100%;
          background-color: #eee;
        }
      }

      .login_form{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 20px;
        
        .view{
          width: 20px;
          display: flex;
          justify-content: center;
        }

        .btns{
          display: flex;
          justify-content: flex-end;
        }

      }
      
    }
  }

  
  
</style>